<template>
	<view class="parameter-edit-page">
		<!-- 参数列表 -->
		<scroll-view class="parameter-list" scroll-y>
			<block v-for="(item, index) in parameters" :key="index">
				<!-- v-if="item.show === 'true'" -->
				<view class="parameter-item" v-if="item.show === 'true'">
					<view class="parameter-label">{{ item.name }}</view>
					<input class="parameter-input" type="digit" v-model="item.value"
						:placeholder="item.placeholder || '请输入'" @input="handleInput(index)" />
				</view>
			</block>
			<view class="" style="height: 150rpx;"></view>
		</scroll-view>

		<!-- 保存按钮 -->
		<view class="save-container">
			<button class="save-button" @click="saveParameters">
				<text class="save-text">保存</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		paramLogApi,
		deviceDetailApi
	} from '@/api/index.js';
	import uploadValJson from './uploadVal.json';
	import {
		parseJSONSafe
	} from '@/utils/jsonUtil';
	import uploadJson from './upload.json';
	export default {
		data() {
			return {
				parameters: [],
				deviceId: "",
				imei: "",
				device: {}
			}
		},
		onLoad(options) {
			console.log(options);
			console.log(uploadValJson, 'uploadValJson');
			this.deviceId = options.deviceId;
			this.imei = options.imei;
			// this.parameters = uploadValJson;
			console.log(this.parameters, 'this.parameters');
			this.deviceDetail();
		},
		methods: {
			// 设备详情
			async deviceDetail() {
				const res = await deviceDetailApi(this.deviceId);
				console.log(res, 'res-设备详情');
				if (res.code === 200) {
					if (res.data.deviceParameterLog) {
						const parsed = parseJSONSafe(res.data.deviceParameterLog)
						// console.log(parsed, '✅ 转成真正JSON对象')
						res.data.deviceParameterLogJson = parsed || res.data.deviceParameterLog
						// 把对象转换为数组并加上 name（从 uploadValJson 映射），方便前端展示
						if (typeof res.data.deviceParameterLogJson !== 'object' || !res.data.deviceParameterLogJson) {
							res.data.deviceParameterLogList = []
						} else {
							try {
								const obj = res.data.deviceParameterLogJson;
								console.log(obj, 'obj');
								res.data.deviceParameterLogList = Object.keys(obj).map(key => {
									const uploadItem = uploadValJson ? uploadValJson[key] : null;
									console.log(uploadItem, 'uploadItem');
									return {
										key,
										value: obj[key],
										name: uploadItem && uploadItem.name ? uploadItem.name : key,
										show: uploadItem && uploadItem.show ? uploadItem.show : 'true'
									};
								});

							} catch (e) {
								res.data.deviceParameterLogList = []
							}
						}

					}
					// console.log(res.data.deviceParameterLogList);
					if (res.data.deviceParameterLogList && res.data.deviceParameterLogList.length > 0) {
						// console.log('chu里');
						this.parameters = res.data.deviceParameterLogList;
					} else {
						this.parameters = uploadValJson;
					}
					this.device = res.data;
					// console.log(this.parameters, 'this.parameters');
					// console.log(res.data.deviceParameterLogList, 'res.data.deviceParameterLogList');
				}
			},
			handleInput(index) {
				// 输入框内容变化处理
				this.parameters[index].value = this.parameters[index].value.trim();
			},
			pad(num) {
				return num < 10 ? '0' + num : num
			},
			async saveParameters() {
				// 深拷贝防止响应式干扰
				const newList = JSON.parse(JSON.stringify(this.parameters));
				// 生成后端需要的结构
				const params = Object.keys(newList).reduce((acc, key) => {
					const item = newList[key];
					if (item && typeof item === 'object' && item.key && item.value !== undefined) {
						acc[item.key] = item.value; // 用内部的 key 做键名
					}
					return acc;
				}, {});
				// 获取当前时间
				const now = new Date()
				// 赋值到 dataParams
				params.year = now.getFullYear();
				params.mon = this.pad(now.getMonth() + 1);
				params.day = this.pad(now.getDate());
				params.hour = this.pad(now.getHours());
				params.min = this.pad(now.getMinutes());
				params.sec = this.pad(now.getSeconds());
				params.year = this.pad(now.getFullYear());
				console.log('params--params:', params);
				const dataParams = {
					deviceId: this.deviceId,
					imei: this.imei,
					deviceParameterLog: JSON.stringify(params)
				}
				console.log('最终传给后端的参数:', dataParams);
				return
				const res = await paramLogApi(dataParams);
				if (res.code === 200) {
					// 保存参数逻辑
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
				}
				// 这里可以添加实际的保存逻辑
				// console.log('保存参数:', this.parameters);
			}
		}
	}
</script>

<style>
	.parameter-edit-page {
		width: 100%;
		height: 100vh;
		background-color: #f8f9fa;
		color: #333;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	/* 页面标题样式 */
	.page-header {
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1px solid #eaeaea;
		background-color: white;
		z-index: 10;
		position: sticky;
		top: 0;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
	}

	/* 参数列表样式 */
	.parameter-list {
		padding: 30rpx;
	}

	/* ✅ 参数卡片容器 */
	.parameter-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		margin-bottom: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
	}

	/* ✅ 左侧 label 文本 */
	.parameter-label {
		flex-shrink: 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}

	/* ✅ 右侧输入框（现代化样式） */
	.parameter-input {
		flex: 1;
		text-align: right;
		font-size: 30rpx;
		color: #333;
		background-color: transparent;
		border: none;
		outline: none;
		padding: 0;
	}

	/* ✅ 优化 placeholder */
	.parameter-input::placeholder {
		color: #b8b8b8;
	}

	/* ✅ 激活态交互体验 */
	.parameter-input:focus {
		border-bottom: 2rpx solid #0081ff;
	}


	/* 保存按钮样式 */
	.save-container {
		z-index: 999;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		padding: 0 30rpx;
	}

	.save-button {
		width: 100%;
		background-color: #0081ff;
		color: white;
		font-size: 32rpx;
		font-weight: 600;
		border-radius: 12rpx;
		border: none;
		box-shadow: 0 4px 12px rgba(254, 84, 99, 0.3);
		transition: all 0.3s ease;
		margin-bottom: 50rpx;
	}

	.save-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 2px 8px rgba(254, 84, 99, 0.3);
	}

	.save-text {
		color: white;
		font-weight: 600;
	}
</style>